import { memo, useMemo, useState } from "react";

// ReactMomo的作用当父组件渲染时，子组件会跟这样一起渲染 使用reactmemo可以避免浪费
//  只有当props改变的时候才重新渲染
// 允许你的组件在 props 没有改变的情况下跳过重新渲染。

// 1. 传递简单类型子组件会跟随prop的改变而渲染 比如数字 字符串 布尔值
// 2. 传递复杂类型父组件每次渲染 由于引用类型比较的是地址，父组件的渲染会让地址改变所以子组件也会渲染

const Son = memo(
  function Son(props) {
    console.log("子组件渲染");
    return <div>我是son</div>;
  },
  (pre, currrent) => {
    console.log(pre, currrent, "对比props是否变化");

    return true;
  }
);

const MemoSon = memo(function Son({ count }) {
  console.log("子组件渲染");
  return <div>我是son————{count}</div>;
});
function Father() {
  const [count, setCount] = useState(0);
  // 2. 传递复杂类型父组件每次渲染 由于引用类型比较的是地址，父组件的渲染会让地址改变所以子组件也会渲染
  // 可以利用usememo避免
  // const arr = [1, 2, 3];
  const arr = useMemo(() => {
    return [1, 2, 3];
  }, []);
  return (
    <div className="list">
      reactMemo的使用———— 我是father
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +1——{count}
      </button>
      {/* <MemoSon count={arr}></MemoSon> */}
      <Son count={arr} />
    </div>
  );
}
export default Father;
